<template>
  	<div class="order">
  		<x-header style="background: #e78a3d;" :left-options="{backText: ''}" :right-options="{showMore: false}" @on-click-more="showMenus = true">确认订单</x-header>
  		<div class="shopname">{{seller.mchtName}}</div>
  		<div class="order-wrapper" ref="orderWrapper">
	  		<div>
	  			<ul>
		  			<li class="order-item" v-for="item in selectFoods" v-show="item.count>0">
		  				<div class="icon">
							<img width="72" height="72" :src="item.picUrl">
		  				</div>
		  				<div class="content">
		  					<h2 class="name">{{item.productName}}</h2>
		  					<p class="desc">{{item.specNameList}}</p>
		  					<div class="numberdesc">
		  						<span class="goodsnum">x{{item.count}}</span>
		  						<span class="price"><span class="smallrmb">￥</span>{{item.productPrice}}</span>
		  					</div>
		  				</div>
		  			</li>
		  		</ul>
		  		<div class="Remarks">
	  				<span class="Remarkstitle">订单备注</span>
		  			<textarea class="Remarksarea"  v-model="remarks" @blur="blue" placeholder="请输入备注内容"></textarea>
		  		</div>
	  		</div>
		</div>
  		<div class="shopcart">
	      <div class="content">
	        <div class="content-left">
	          <div class="desc orderdesc">
	          	<p class="Highlight">合计</p>
	          	<p>本店先消费后用餐</p>
	          </div>
	          <div class="price orderprice"><span class="smallrmb">￥</span>{{this.totalPrice}}</div>
	        </div>
	        <div class="content-right" @click.stop.prevent="pay">
	          <div class="pay orderpay">
	            去买单
	          </div>
	        </div>
	      </div>
	    </div>
  	</div>
</template>

<script type="text/ecmascript-6">
	import BScroll from 'better-scroll';
	import { XHeader } from 'vux';
	import {createOrderAdd,getOpenid} from 'src/methods/request.js';
	  export default {
	    name:"order",
	    props: {
	    },
	    data() {
	      return {
	        detailShow: false,
	        selectFoods:[],
	        productList:[],
	        productNo:"",
	        orderProductSpecList:[],
	        buyNumber:"",
	        seller:{},
	        totalPrice:"",
	        orderNo:"",
	        order:[],
	        code:"",
	        mchtId:"",
	        personNumber:"",
	        tableNumber:"",
	        remarks:""
	      };
	    },
	    created() {
	    	this.mchtId =JSON.parse(sessionStorage.getItem("mchtId"));
	    	this.personNumber =JSON.parse(sessionStorage.getItem("personNumber"));
	    	this.tableNumber =sessionStorage.getItem("table");
	    },
	    mounted(){
	    	this.$nextTick(_ => {
				this.selectFoods = JSON.parse(sessionStorage.getItem("selectFoods"))
//				console.log(this.selectFoods)
				this.totalPrice = JSON.parse(sessionStorage.getItem("totalPrice"))
				this.seller = JSON.parse(sessionStorage.getItem("seller"))
				for (var orderMsg of this.selectFoods) {
				  this.productNo = orderMsg.productNo;
				  this.buyNumber = orderMsg.count;
				  if(!orderMsg.orderProductSpecList){
				  	this.orderProductSpecList = []
				  }else{
				  	this.orderProductSpecList = orderMsg.orderProductSpecList;
				  }
				  var orderObj = {productNo:this.productNo,buyNumber:orderMsg.count,orderProductSpecList:this.orderProductSpecList};
				  this.productList.push(orderObj);
				}
				this.$nextTick(() => {
			        this._initScroll();
			      });
	    	})
	    },
	    methods: {
	    	pay() {
		        if (this.totalPrice === 0) {
		          return;
		        }else{
		        	//获取到openid
					this.code = JSON.stringify(sessionStorage.getItem("code"));
					getOpenid({code:this.code}).then(response => {
						this.openId = response.data;
						sessionStorage.setItem("openId",JSON.stringify(this.openId));
						}
					).catch(
						error => console.log(error)
					);
		        	//数据交互提交订单
					createOrderAdd({mchtId:this.mchtId,personNumber:this.personNumber,tableNumber:this.tableNumber,productList:this.productList,remark:this.remarks,openId:"ASX5542684QWE"}).then(
						response => {
							if(response.rspCode == "0000"){
								this.order = response.data;
								this.orderNo = this.order.orderNo;
								sessionStorage.setItem("orderNo",JSON.stringify(this.orderNo));
							}else{
								alert("创建订单失败！")
							}
						}
					).catch(
						error => console.log(error)
					);

					//跳转支付页面
		        	this.$router.push('/payment')
		        }
      		},
      		_initScroll() {
		      	this.orderWrapper = new BScroll(this.$refs.orderWrapper, {
		         	click: true
		        });
		    },
		    blue(){
		    	console.log(this.remarks)
		    }
	    },
	    beforeRouteLeave(to, from, next) {
		// 设置下一个路由的 meta
		to.meta.keepAlive = true; // 让 A 缓存，即不刷新
		next();
		},
	    components: {
			XHeader
	    }
	  };
</script>

<style lang="stylus" rel="stylesheet/stylus">
    @import "../../common/stylus/mixin";
    .order{
    	display: flex;
    	flex-direction: column;
    }
    .order-wrapper{
    	flex: 1;
    	position: absolute;
    	top: 80px;
	    bottom: 48px;
	    width: 100%;
	    overflow: hidden;
    }
	.orderpay{
		background: #e78a3d;
		color: #fff;
	}
	.orderdesc{
		padding-left: 4px;
	}
	.orderprice{
		color: #fff;
	}
	.shopname{
		font-size: 14px;
		background: #f2f2f2;
		color: #666;
		padding: 10px;
	}
	.order-item{
		display: flex;
		position: relative;
	}
	.order-item .icon{
		width: 72px;
		height: 72px;
		background: pink;
		float: left;
		border-radius: 6px;
		margin: 10px;
	}
	.order-item .content{
		border-bottom: 1px solid #d9d9d9;
		margin-left: 10px;
		float: left;
		flex: 1;
		margin: 10px 0 10px 0;
	}
	.order-item .name{
		margin: 2px 0 4px 0;
	    height: 14px;
	    line-height: 14px;
	    font-size: 14px;
	    color: #323232;
	}
	.order-item .desc{
		font-size: 12px;
   		color: #93999f;
	}
	.numberdesc{
		padding-top: 15px;
		padding-bottom: 10px;
		vertical-align: bottom;
		color: #333333;
	}
	.numberdesc .goodsnum{
		font-size: 14px;
		line-height: 18px;
	}
	.numberdesc .price{
		float: right;
		color: #e9873e;
		font-size: 20px;
		padding-right: 15px;
	}
	.Remarks{
		width: 100%;
		padding: 10px 0;
		height: 18px;
		border-top: 1px solid #d9d9d9;
		border-bottom: 1px solid #d9d9d9;
		vertical-align: bottom;
		display: flex;
	}
	.Remarks .Remarkstitle{
		font-size: 14px;
	    color: #666;
	    padding: 0 10px;
	    line-height: 18px;
	    width: 30%;
	}
	.Remarks .Remarksarea{
		flex: 1;
		height: 18px;
		background: none;
		border: 0;
		line-height: 18px;
		text-align: end;
		padding-right: 10px;

	}
</style>
